
<template>
    <div>
      <el-steps
        :space="200"
        
        align-center="true"
        finish-status="success"
        class="step"
      >
        <el-step title="个人信息补充"></el-step>
        <el-step title="个人信息审核通过"></el-step>
        <el-step title="上传材料"></el-step>
        <el-step title="材料通过"></el-step>
        <el-step title="待签合同"></el-step>
        <el-step title="合同签订待放款"></el-step>
      </el-steps>
  
      <el-card class="box-card" body-style="">
        <el-row>
          <div>
            
              <el-collapse
                
              >
                <el-collapse-item
                  v-for="(item, index) in documentType"
                  :key="index"
                  :title="item.documentTypeName"
                  :name="index"
                >
                  <div>
                    <el-form-item label="'上传' + item.documentTypeName">
                      <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/products/uploadProductCover"
                        name="addProduct.userinfoFrontPhoto"
                        :show-file-list="false"
                        :on-success="handleSuccess()"
                        :before-upload="beforerUpload"
                      >
                        <img
                          v-if="item.backup1"
                          :src="item.backup1"
                          class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </div>
                </el-collapse-item>
              </el-collapse>
  
              <el-row>
                <el-button type="primary" @click="pushDocument"
                  >提交信息</el-button
                >
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="warning">取消</el-button>
              </el-row>
            
          </div>
          <div></div>
        </el-row>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
       
        documentType: [],
        documentStr: [],
      };
    },
    methods: {
      handleSuccess(res, file, index) {
        // this.documentType[index].backup1 = res.message;
      },
      beforeUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 10;
  
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        }
        return isJPG && isLt2M;
      },
  
      pushDocument() {
        for(var i = 0; this.documentType.length < 0; i++){
          this.documentStr[i].documentTypeId = this.documentType[i].documentTypeId;
          this.documentStr[i].documentTypeId = this.documentType[i].documentTypeId;
        }
        
      },
  
      /**
       * 提交信息
       */
      loadDocument() {
        var productId = sessionStorage.getItem("productId");
        alert(productId);
        this.$axios.post("document/" + productId).then((res) => {
          if (res.data.code == 200) {
            this.documentType = res.data.data.docs;
          }
        });
      },
    },
    mounted() {
      this.loadDocument();
    },
  };
  </script>
  
  <style>
  .text {
    font-size: 14px;
  }
  
  .item {
    margin-bottom: 18px;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  
  .clearfix:after {
    clear: both;
  }
  
  .box-card {
    width: 1200px;
    margin: 10px auto;
    margin-top: 40px;
  }
  
  .step {
    margin-top: 30px;
    margin-left: 175px;
  }
  
  .step2 {
    margin-top: 60px;
    margin-left: 180px;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>